<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>入驻</title>
    <link rel="stylesheet" href="./css/weui.css">
    <link rel="stylesheet" href="./css/jquery-weui.css">
    <style>
        html, body {
            background: #f7f7f7;
        }

        .weui-form {
            box-sizing: border-box;
            padding: 10px;
            margin-bottom: 60px;
        }

        h3 {
            font-weight: 600;
            line-height: 60px;
        }

        .weui-cells {
            margin-top: 0;
            font-size: 15px;
        }

        .weui-input {
            text-align: right;
        }

        .weui-btn {
            background: -webkit-linear-gradient(left bottom, #72affb, #2392f9);
            background: -moz-linear-gradient(left bottom, #72affb, #2392f9);
            background: -ms-linear-gradient(left bottom, #72affb, #2392f9);
            background: -o-linear-gradient(left bottom, #72affb, #2392f9);
            margin-top: 30px;
        }

        .weui-picker-container {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

        .del {
            display: inline-block;
            width: 25px;
            height: 25px;
            line-height: 20px;
            text-align: center;
            color: #fff;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
        }
        .weui-cell{
        	padding: 15px 15px;
        }
        .weui-cells:before{
        	border-top: 1px solid transparent;
        }
    </style>
</head>
<body ontouchstart>
<div id="adimssion">
    <form action="##" class="weui-form" @submit="checkForm">
        <h4 style="line-height: 40px">基本信息</h4>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">店铺名称</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="name" placeholder="请输入店铺名称">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">店铺电话</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel" v-model="phone" maxlength="11" placeholder="请输入店铺电话">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">行业分类</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="选择店铺分类" v-model="storeType" id="type">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">营业时间</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" id="shopHours" placeholder="选择营业时间">
                </div>
            </div>
        </div>
        <h4 style="line-height: 50px">区域地址</h4>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">所属区域</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="reg" id="reg" placeholder="请选择店铺所属区域">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">店铺地址</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" placeholder="请输入店铺详细地址">
                </div>
            </div>
        </div>
        <h4 style="line-height: 50px"> 店铺图片</h4>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">店铺图标</p>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul ref="shopLogo" class="weui-uploader__files" id="uploaderFiles"></ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input js_file" type="file"
                                       accept="image/*">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title" id="uploaderFiles2">店铺相册</p>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files"></ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput2" class="weui-uploader__input js_file" type="file"
                                       accept="image/*"
                                       multiple="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h4 style="line-height: 50px">其他信息</h4>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入店铺简介" rows="3"></textarea>
                </div>
            </div>
        </div>
        <h4 style="line-height: 50px">店主信息</h4>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" v-model="storeName" placeholder="请输入店铺联系人">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">电话</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel" v-model="storePhone" maxlength="11"  placeholder="请输入店主联系电话">
                </div>
            </div>
        </div>
        <button class="weui-btn">确认提交</button>
    </form>
    <zh-tabbar is-tab="3"></zh-tabbar>
</div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/vue2.5.16.js"></script>
<script src="js/fastclick.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
    });
</script>
<script src="js/city-picker.min.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/file.js"></script>
<script src="js/tabbar.js"></script>
<script>

    var app = new Vue({
        el: "#adimssion",
        data: {
            name: '',
            phone: '',
            storeType: '',
            shopHours: '',
            reg: '',
            logo: '',
            storeName: '',
            storePhone: '',
        },
        methods: {
            checkForm: function (e) {
                this.logo = src;
                if (!this.name) {
                    $.toptip('店铺名称不能为空', 'error');
                } else if (!this.phoneCall(this.phone)) {
                    $.toptip('电话输入有误', 'error');
                } else if (!this.storeType) {
                    $.toptip('请选择商铺类型', 'error');
                } else if (!this.shopHours) {
                    $.toptip('请选择营业时间', 'error');
                } else if (!this.reg) {
                    $.toptip('请选择店铺区域', 'error');
                } else if (!this.logo) {
                    $.toptip('请上传店铺logo', 'error');
                } else if (!this.storeName) {
                    $.toptip('输入店主姓名', 'error');
                } else if (!this.phoneCall(this.storePhone)) {
                    $.toptip('输入店主电话', 'error');
                }
                e.preventDefault();
            },

            phoneCall: function (phone) {
                var re = /^1[3|4|5|7|8|9]\d{9}$/;
                return re.test(phone);
            }
        }
    })
    //店铺类型
    $("#type").picker({
        title: "请选择您的手机",
        cols: [
            {
                textAlign: 'center',
                values: ['类型0', '类型1', '类型2', '类型3',]
            }
        ],
        onChange: function (p, v, dv) {
            app.storeType = v[0]
        }
        ,
    })
    //营业时间
    $("#shopHours").picker({
        title: "请选择您的营业时间",
        cols: [
            {
                textAlign: 'center',
                values: ['08:00-21:00', '09:00-22:00',]
            }
        ],
        onChange: function (p, v, dv) {
            app.shopHours = v[0]
        },
    })
    $("#reg").cityPicker({
        title: "选择地址",
        onChange: function (picker, values, displayValues) {
            app.reg = displayValues[0] + displayValues[1] + displayValues[2]
        }
    });
</script>
</html>